﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/lib/html5.js"></script>
<script type="text/javascript" src="/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />

<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
<!--/meta 作为公共模版分离出去-->
<title>基地报名</title>
</head>
<body>
<!--_header 作为公共模版分离出去-->
<div th:replace="common/header::header"></div>
<!--_menu 作为公共模版分离出去-->
<div th:replace="common/menu::menu"></div>

<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont"></i> <a href="/index" class="maincolor">首页</a>
		<span class="c-999 en">&gt;</span><span class="c-666">学生中心</span>
		<span class="c-999 en">&gt;</span><span class="c-666">教学基地报名</span></nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			<div class="panel panel-default">
				<div class="panel-header">基地报名</div>
				<form class="panel-body" id="form">
					<div class="text-c" id="">
						基地编号：<input type="text" class="input-text radius mr-5" style="width:210px" name="baseId">
						公司：<input type="text" class="input-text radius mr-5" style="width:210px" name="companyName">
						实训老师：<input type="text" class="input-text radius mr-5" style="width:210px" name="teacherName">
						<button type="submit" class="btn btn-success radius" name=""><i class="Hui-iconfont"></i> 查询</button>
					</div>
				</form>
			</div>

			<div class="mt-20">
				<table class="table table-border table-bordered table-striped table-hover">
					<tbody class="text-c" id="tbody">
					<tr>
						<td>基地编号</td>
						<td>基地名称</td>
						<td>基地描述</td>
						<td>基地所属公司</td>
						<td>实训老师</td>
						<td>基地地点</td>
						<td>报名人数</td>
						<td>操作</td>
					</tr>
					</tbody>
				</table>
			</div>
		</article>
	</div>
	<input type="hidden" th:value="${session.currentUser.username}" id="hidden_username">
</section>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
	$(function () {
		getBases();

		//条件查询表单提交
		$("#form").submit(function () {
			var searchParams = $('#form').serializeArray();
			$(".singleData").empty();
			$.ajax({
				type: "POST",
				data: searchParams,
				url: "/student/getBaseList",
				dataType: "json",
				success: function(data){
					showData(data);
				}
			});
			return false;//实现页面不刷新
		});

	});
	/*查询基地，进行表格填充*/
	function getBases() {
		$.ajax({
			type: "GET",
			url: "/student/getBaseList",
			dataType: "json",
			success: function(data){
				showData(data);
			}
		});
	}

	function showData(data){
		var studentId = $("#hidden_username").val();
		var button = "";
		$(".singleData").remove();
		if (data[0]){
			$.each(data,function (index,base) {
				button = "<input class='btn btn-success radius size-MINI' type='button' value='报名' onclick='statusChange(this,"+base.baseId+","+studentId+")'>";
				$.each(base.baseStudentList,function (index,baseStudent) {
					if (baseStudent.studentId==studentId){
						button = "<input class='btn btn-danger radius size-MINI' type='button' value='取消' onclick='statusChange(this,"+base.baseId+","+studentId+")'>";
						return false;
					}
					// else if(base.baseNum == base.baseEnrolmentNum){
					// 	button = "<input class='btn btn-default radius size-MINI' type='button' value='已满' disabled='disabled'>";
					// 	return false;
					// }
				});
				$("#tbody").append("<tr class='singleData'>\n" +
						"\t\t\t\t\t\t<td><a href='/student/baseDetails/"+base.baseId+"' class=\"c-primary\">"+base.baseId+"</a></td>\n" +
						"\t\t\t\t\t\t<td>"+base.baseName+"</td>\n" +
						"\t\t\t\t\t\t<td>"+base.baseDescription+"</td>\n" +
						"\t\t\t\t\t\t<td>"+base.company.companyName+"</td>\n" +
						"\t\t\t\t\t\t<td><a href='/student/teacherDetails/"+base.teacher.teacherId+"' class=\"c-primary\">"+base.teacher.teacherName+"</a></td>\n" +
						"\t\t\t\t\t\t<td>"+base.baseAddress+"</td>\n" +
						"\t\t\t\t\t\t<td>"+base.baseEnrolmentNum+"/"+base.baseNum+"</td>\n" +
						"\t\t\t\t\t\t<td>"+button+"</td>\n" +
						"\t\t\t\t\t</tr>");
			});
		} else {
			$(".singleData").empty();
			$("#tbody").append("<tr class='singleData'><td colspan='8' style='color: red'><h4>"+data[1]+"</h4></td></tr>");
		}
	}

	function statusChange(obj,baseId,studentId){
		if ($("input").hasClass("btn-danger") && $(obj).hasClass("btn-success")) {
			layer.msg("仅能报名一个校外基地",{icon:5,time:1300});
		}else{
			if($(obj).hasClass("btn-success")){
				layer.confirm("是否报名？",function (index) {
					$.ajax({
						type:"POST",
						url:"/student/signUp?baseId="+baseId+"&&studentId="+studentId,
						dataType: "json",
						success: function(data){
							if (data.flag=="FULL"){
							console.log(data.flag);
								layer.msg("报名失败,人数已满。",{icon:2,time:1000});
							}else if(data.flag=="SUCCESS"){
								$(obj).parents("td").prepend("<input class=\"btn-danger btn radius size-MINI\" type=\"button\" value=\"取消\" onclick=\"statusChange(this,"+baseId+","+studentId+")\">");
								$(obj).remove();
								layer.msg("报名成功。",{icon:1,time:1000})
							}
							else {
								layer.msg("报名失败。",{icon:2,time:1000});
							}
							getBases();
						}
					})
					layer.close(index);
				});
			}else{
				//取消报名
				$.ajax({
					type:"POST",
					url:"/student/cancel?baseId="+baseId+"&&studentId="+studentId,
					dataType: "json",
					success: function(data){
						if (data){
							layer.msg("取消成功。",{icon:1,time:1000})
							// $(obj).parents("td").prepend("<input class=\"btn btn-success radius size-MINI\" type=\"button\" value=\"成功\" onclick=\"statusChange(this,"+baseId+","+studentId+")\">");
							// $(obj).remove();
						} else {
							layer.msg("取消失败，请联系辅导员。",{icon:2,time:1000});
						}
						getBases();
					}
				});
			}

		}
	}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
